<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城</title>

        <style type="text/css">
            .logo {
                margin: auto ;
                width: 550px ;
                height: 550px ;
                background-color: #ff740f ;
                background-image: url("mi-home.png") , url("mi-logo.png") ;
                background-repeat: no-repeat ;
                /* background-size : 宽度  高度 ; */
                background-size: 550px 550px , 550px 550px ;
                /* background-position : 水平  垂直 ; */
                background-position: -550px 0 , 0 0 ;
                transition: background-position 300ms ;
            }
            .logo:hover {
                background-position: 0 0 , 550px 0 ;
            }
        </style>


    </head>
    <body>

        <div class="logo"></div>

    </body>
</html>